<template>
    <div class="addaddress">
<!--        <Header class="head">-->
<!--            <i class="layui-icon layui-icon-left" @click="tochooseaddress"></i>-->
<!--            <span>添加地址</span>-->
<!--        </Header>-->
      <Top><p>添加地址</p></Top>

        <div class="address_page">
<!--------内容---------------------------------------------->
               <div class="page_text_container">
                   <div class="section_list">
                        <span class="section_left">联系人</span>
                         <div class="section_right">
                             <input type="text" name="name" placeholder="你的名字" v-model="username">
                             <div class="choose_sex">
                                 <span class="choose_option">
                                     <i class="el-icon-success" :class="{success:greenShow1}" @click="men"></i>
                                     <span>先生</span>
                                 </span>
                                 <span class="choose_option">
                                     <i class="el-icon-success" :class="{success:greenShow2}" @click="women"></i>
                                     <span>女生</span>
                                 </span>

                             </div>
                         </div>
                   </div>
                   <div class="section_list">
                     <span class="section_left">联系电话</span>
                     <div class="section_right">
                           <div class="phone_add">
                               <input type="text" name="phone" placeholder="你的手机号" v-model="phonenumber">
                               <i class="el-icon-plus" @click="add"></i>

                           </div>
                         <input  type="text" name="anntherPhoneNumber" placeholder="备选电话" class="input_style phone_bk" v-show="readyShow" v-model="readyphone">


                     </div>



                   </div>
                   <div class="section_list">
                       <span class="section_left">送餐地址</span>
                       <div class="section_right">
                           <input type="text" class="choose_address" @click="toadddetail" placeholder=" 小区/写字楼/学校等" v-model="address">
                           <input type="text" name="address_detail" placeholder="详细地址（如门牌号等）" class="input_style" v-model="addressdetail">
                       </div>
                   </div>
                   <div class="section_list">
                      <span class="section_left">
                          标签
                      </span>
                      <div class="section_right">
                          <input type="text" name="tag" placeholder="无/家/学校/公司" class="input_style" v-model="tagcontent">
                      </div>

                   </div>

               </div>
<!---------------------------------------------------------------->
                <div class="determine" @click="makesure">确定</div>
        </div>

        <!-----------------弹框-------------------------->
<!--        <div class="top" :class="{topActive:alertShow}">-->
<!--            <div class="icon">-->
<!--                <span></span>-->
<!--                <span></span>-->
<!--            </div>-->
<!--            <p class="tip_text">{{alertmsg}}</p>-->
<!--            <div class="confrim" @click="btnClick">确认</div>-->
<!--        </div>-->


<router-view></router-view>

    </div>
</template>

<script>
    import qs from "../../node_modules/querystring"
    // import "../../node_modules/layui-src/dist/layui.all"
    // import "../../node_modules/jquery/dist/jquery.min"
    import Top from "@/components/Top";
    export default {
        name: "Addaddress",
        data:function(){
            return{
                readyShow:false,
                greenShow1: true,
                greenShow2:false,
                alertShow:false,
                userid:'', //用户的id
                username:'', //收件人姓名 输入框内的值
                sex:1,//性别
                phonenumber:'',//手机号
                readyphone:'', //备用电话
                address:'', //地址  y
                addressdetail:'', //地址详情
                tagcontent:"",//标签内容
                tagtype:'1',//标签类型
                geohash:'',//经纬度   y
                alertmsg:'请输入正确的信息',
                choosemsg:[],

            }
        },
        components: {Top},
        methods:{
            tochooseaddress(){
               this.$router.push("/confirmorder/chooseaddress")
            },
            add(){
                this.readyShow=!this.readyShow;
            },
            men(){
                this.greenShow1=!this.greenShow1;
                this.greenShow2=!this.greenShow2
            },
            women(){
                this.greenShow2=!this.greenShow2;
                this.greenShow1=!this.greenShow1;

            },
            toadddetail(){
                this.$router.push("/close/chooseAddress/addshipp/addsite")
            },
            btnClick(){
                this.alertShow = false;
            },
            makesure(){
                this.alertShow=true;
                this.axios.post("https://elm.cangdu.org/v1/users/"+this.userid+"/addresses",qs.stringify({user_id:this.userid,address:this.address,address_detail:this.addressdetail,geohash:this.geohash,name:this.username,phone:this.phonenumber,tag:this.tagcontent,sex:this.sex,phone_bk:this.readyphone,tag_type:this.tagtype})).then(data=>{
                    console.log(data.data);
                    if(data.data.message=="收货人姓名错误"){
                         this.alertmsg="收货人姓名错误"
                    }
                    if(data.data.message=="详细地址信息错误"){
                        this.alertmsg="详细地址信息错误"
                    }
                    if(data.data.message=="收获手机号错误"){
                        this.alertmsg="收获手机号错误"
                    }
                    if(data.data.message=="标签错误"){
                        this.alertmsg="标签错误"
                    }
                    if(data.data.success=="添加地址成功"){
                        this.alertmsg="添加地址成功" ,
                         this.$router.push("/close/chooseAddress")

                    }
                }).catch(error=>{
                    console.log(error)
                })






            }
        },
        created() {
            //本人的信息
            let minemessage=JSON.parse(localStorage.user);
            console.log(minemessage);
             this.userid=minemessage["user_id"]
            console.log(this.userid)
            // this.address=JSON.parse(localStorage.address)
            // this.geohash=JSON.parse(localStorage.geohash)
            // console.log(this.address)
            // console.log(this.geohash)
          this.$on("addsite2",(a)=>{
            this.geohash=a.geohash;
            this.address=a.name;
            console.log(a)
          })
        }
    }
</script>

<style scoped>
.head{
    position: fixed;
    top: 0;

}
.addaddress{
    position: absolute;
    top: 0rem;
    left: 0rem;
    height: 41.5rem;
    width: 23.4rem;
    background-color: #f5f5f5;
}
.address_page{
    //padding-top: 3rem;
}
.page_text_container {
    background-color: #fff;
    padding: 0 .7rem;
}
.section_list{
    display: flex;
    border-bottom: .025rem solid #f5f5f5;
}
.section_list .section_left{
    font-size:1.1rem;
    color: #333;
    flex: 2;
    line-height: 3rem;
}
.section_list .section_right{
    flex: 5;
}
.section_list .section_right .input_style{
    width: 100%;
    height: 2.5rem;
    font-size: .7rem;
    color: #999;
}
.section_list .section_right .choose_sex{
    display: flex;
    line-height: 2.5rem;
    border-top: .025rem solid #f5f5f5;
}
.section_list .section_right .choose_sex .choose_option{
    font-size: 1rem;
    color: #333;
    display: flex;
    align-items: center;
    margin-right: .8rem;
}
.section_list .section_right .phone_add{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section_list .section_right .input_style{
    width: 100%;
    height: 3rem;
    font-size: 1rem;
    color: #999;
}
.section_list .section_right .choose_address{
    font-size: 1rem;
    color: #999;
    line-height:3rem;
    border-bottom: .025rem solid #f5f5f5;
}
.determine{
    background-color: #4cd964;
    font-size: 1.2rem;
    color: #fff;
    text-align: center;
    margin: 0 .7rem;
    line-height: 3rem;
    border-radius: .2rem;
    margin-top: .6rem;
}
    input{
        border:1px solid transparent;
        height: 3rem;
        font-size: 1.1rem;
    }
   .el-icon-success{
      color: #cccccc;
       font-size: 1.5rem;
   }
.section_list .section_right .phone_bk{
    border-top: .025rem solid #f5f5f5;
}
    .el-icon-plus{
        color: #3190e8;
        font-size: 1.5rem;
        font-weight: bolder;
    }
    .success{
        color: #4cd964;
    }
.topActive{
    display: block!important;
}
.top{
    position: relative;
    top:-10rem;
    left:3rem;
    width: 18rem;
    height: 11rem;
    animation: tipMove .4s;
    background-color: #fff;
    padding-top: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px;
    border-radius: .25rem;
    display: none;

}
.top .icon{
    width: 4rem;
    height:4rem;
    border: .2rem solid #f8cb86;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 1rem;
    left:7rem;

}
.top .icon span:first-of-type{
    width: .14rem;
    height: 1.5rem;
    background-color: #f8cb86;
}
.top .icon span:nth-of-type(2){
    width: .22rem;
    height: .2rem;
    border: 1px;
    border-radius: 50%;
    margin-top: .2rem;
    background-color: #f8cb86;
}
.tip_text{
    font-size: 1rem;
    color: #333;
    line-height: .9rem;
    text-align: center;
    margin-top: 5.5rem;
    padding: 0 .4rem;
}
.confrim {
    font-size: 1rem;
    color: #fff;
    font-weight: 700;
    margin-top:2rem;
    background-color: #4cd964;
    width: 100%;
    text-align: center;
    line-height:3rem;
    border: 1px;
    border-bottom-left-radius: .25rem;
    border-bottom-right-radius: .25rem;
}
</style>